<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../EaselJS/lib/easeljs-0.8.2.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="1050" height="420"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas"),
        stage = new createjs.Stage(canvas);

    var groundImage = 'http://cdn.gbtags.com/gblibraryassets/libid108/ground.png';
    var stageHeight = canvas.height;
    var stageWidth = canvas.width;
    var blockHeight = 70;

    var spritesheet;
    var characterHeight = 96;
    var characterGround = stageHeight - blockHeight - characterHeight;

    window.onload=function(){
        function setup() {
            //创建图片
            var ground = new createjs.Bitmap(groundImage);
            //克隆5个地面图片生成游戏区域的地面效果
            for (i = 0; i < 20; i++) {
                var tempBlockGround = ground.clone();
                tempBlockGround.x = i * 70;
                tempBlockGround.y = stageHeight - blockHeight;
                stage.addChild(tempBlockGround);
            }

            //生成动画人物所需的sprite
            spritesheet = new createjs.SpriteSheet({
                "images": ['http://cdn.gbtags.com/gblibraryassets/libid108/charactor.png'],
                "frames": {"height": 96, "count": 10, "width": 75},
                "animations": { run: [0,9]}
            });

            character = new createjs.Sprite(spritesheet);
            character.framerate = 30;
            character.x = 10;
            character.y = characterGround; //小人所在的Y轴位置
            stage.addChild(character);

            //播放动画效果
            character.play();
            //调用tick方法
            createjs.Ticker.addEventListener("tick", tick);
        }
        function tick(event) {
            stage.update();
        }
        setup();
    };
</script>
</body>
</html>